<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/jsp/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jqGird</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/plugins/h+/css/plugins/webuploader/webuploader.css">
    <link href="${ctxStatic}/plugins/h+/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .ml10 {
            margin-left: 15px;
        }

    </style>

</head>

<body class="gray-bg" >
<div class="wrapper wrapper-content  animated fadeInRight" id="ccbb">
    <div class="row">
        <div class="col-sm-12">
            <%--<div class="toolbar">--%>
                <%--<div id="toolbar">--%>
                    <%--<button id="btn_add" class="btn btn-primary"><i class="fa fa-plus-circle"></i>&nbsp;新增</button>--%>
                    <%--<button id="btn_del" class="btn btn-w-s btn-danger"><i class="fa fa-times-circle"></i>&nbsp;批量删除</button>--%>
                    <%--<button id="button" class="btn btn-primary " ><i class="fa fa-check-circle"></i>&nbsp;获取选中</button>--%>
                    <%--<button id="btn_getCheck" class="btn btn-primary " ><i class="fa fa-check-square"></i>&nbsp;获取选中ChekBox</button>--%>
                <%--</div>--%>
            <%--</div>--%>
            <span id="spancc" class="spancc"></span>
            <div class="row">
                <%--<div class="ibox float-e-margins">--%>
                    <%--<div class="ibox-title">--%>
                        <%--<h5>搜索条件</h5>--%>
                        <%--<div class="ibox-tools">--%>
                            <%--<a class="collapse-link">--%>
                                <%--<i class="fa fa-chevron-up"></i>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="ibox-content" >--%>
                        <%--<div class="row">--%>
                            <%--<div class="col-md-2"><input placeholder="客户" id="search_customer" class="form-control" id="search_customer"></div>--%>
                            <%--<div class="col-md-1"><button id="btn_search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;搜索</button></div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
            </div>
            <table id="exampleTablePagination"></table>
        </div>
    </div>
</div>

<div class="modal inmodal" id="myModal3" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated fadeIn">
            <div class="modal-header">
                <input type="hidden" id="user_code">
                <span style="font-size:18px;">修改密码</span>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <form name="">
                    <div><label>新密码：</label><input type="text" class="form-control" placeholder="修改密码之后，原密码无法登陆" id="newPwd"/></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updatePwd()">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="myModal4" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated fadeIn">
            <div class="modal-header">
                <span style="font-size:18px;">修改手机号</span>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <form name="">
                    <div><label>当前手机号：</label><input type="text" class="form-control" id="oldPhone" readonly/></div>
                    <div><label>新手机号：</label><input type="text" class="form-control" id="newPhone"/></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updatePhone()">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/bootstrap-table.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/editable/bootstrap-table-editable.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/layer/laydate/laydate.js"></script>
<script>

</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script type="text/javascript">
    //初始化表格对象
    var sid="${sid}";
    var $table = $('#exampleTablePagination');
    /*
     获取选中行的相关数据
     */
    $(function () {
        $table.on('click-row.bs.table', function (e, row, $element) {
            $('.success').removeClass('success');
            $($element).addClass('success');
        });
        $('#button').click(function () {
            alert('Selected name: ' + getSelectedRow().customer);
        });
    });
    function getSelectedRow() {
        var index = $table.find('tr.success').data('index');
        return $table.bootstrapTable('getData')[index];
    }

    /*
     操作按钮的初始化
     */
    function userOperation(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="喜好">',
            '<i class="glyphicon glyphicon-heart"></i>',
            '</a>',
            '<a class="edit ml10" href="javascript:void(0)" title="编辑">',
            '<i class="glyphicon glyphicon-edit"></i>',
            '</a>',
            '<a class="remove ml10" href="javascript:void(0)" title="删除">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
    //每个按钮对应的事件
    window.actionEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like icon, row: ' + JSON.stringify(row));
        },
        'click .edit': function (e, value, row, index) {
            //弹出编辑层
            showPopup();
        },
        'click .remove': function (e, value, row, index) {
            alert('You click remove icon,: ' + JSON.stringify(row));

        }
    };

    /*
     每一列详情格式化数据
     */
    function formDetail(index, row) {
        return row.customer+index;
    }


    function showPopup(){
        //自定页
        parent.layer.open({
            type: 2,
            shift:4,//动画类型
            moveType:1,
            maxmin: true,
            shadeClose: true, //开启遮罩关闭
            area: ['700px', '530px'],
            content: '${pageContext.request.contextPath}/shop/toShopEdit.ac',
            success: function(layero, index){
                //layer.title("888888888", index);
                var datas={"firstname":"555555"};
//                    var body = layer.getChildFrame('body', index);
                //var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
//                    console.log(body.html()) //得到iframe页的body内容
            },
            cancel: function(index){
//                    alert(index);
                return true;
            }
        });
    }

    ////////////////////////////////////////////////////////////////////////////////////////以下是通过js方式初始化BootStrapTable/////////////////////////////////////////////

    $table.bootstrapTable({
        url: "${pageContext.request.contextPath}/shop/showShopAccount.ac?sid="+sid,
        method: 'post',
        contentType: "application/x-www-form-urlencoded",//必须的
        dataType: "json",
        pageList:[10, 20, 50, 100],//会根据当前的数据量加载合适的pageList
        height: ($(window).height()-200) ,
        //cardView:true,//是否自适应手机
        pagination: true, //分页
        // queryParamsType: "limit",
        singleSelect: false,
        cache:false,
        sortName:"name",
        search: false, //显示搜索框
        showColumns:false,
        showRefresh:false,
        showToggle:false,
        showPaginationSwitch:false,
        smartDisplay:true,
        detailView:false,
        toolbar:"#toolbar",
        queryParams: queryParams,//参数
        searchOnEnterKey:true,
        detailFormatter:function(index, row, element){
            return row.customer;
        },
        sidePagination: "server", //服务端处理分页
        columns: [
//            {
//                visible:false,
//                field:'id'
//            },
//            {
//                title:'选择',
//                align:'center',
//                checkbox:true
//            },
            {
                title: '登录名',
                field: 'loginName',
                sortStable:true,
                align: 'center'
            },
            {
                title: '姓名',
                field: 'personName',
                sortStable:true,
                align: 'center'
            },
            {
                title: '账号类别',
                field: 'type',
                sortStable:true,
                align: 'center',
                formatter:function(value,row,index){
                    if(value=='1'){
                        return '店长';
                    }else if(value=='2'){
                        return '店员';
                    }
                }
            },
            {
                title: '操作',
                align: 'center',
                events:{
                    'click .like': function (e, value, row, index) {
                        alert('You click like icon, row: ' + JSON.stringify(row));
                    },
                    'click .edit': function (e, value, row, index) {
                        // alert('You click edit icon, row: ' + JSON.stringify(row));
                        //弹出编辑层
                        showPopup();
                    },
                    'click .remove': function (e, value, row, index) {
                        var arr=[row.sid];
                        deleteGrid(arr);
                    },
                    'click .pwd': function (e, value, row, index) {
                        var arr=[row.id];
                        changePwd(arr);
                    },
                    'click .phone': function (e, value, row, index) {
                        var arr=[row.user_code];
                        var phone=[row.phone];
                        changePhone(arr,phone);
                    }
                },
                formatter:function(value,row,index){
                    return [
                        '<a class="pwd ml10" href="javascript:void(0)" title="修改密码" >',
                        '<i class="glyphicon ">修改密码</i>',
                        '</a>',
                        '<a class="phone ml10" href="javascript:void(0)" title="更改手机号" >',
                        '<i class="glyphicon ">更改手机号</i>',
                        '</a>',
//                            '<a class="edit ml10" href="javascript:void(0)" title="编辑">',
//                            '<i class="glyphicon glyphicon-edit"></i>',
//                            '</a>',
                    ].join('');
                }
            }
        ]
    });

    /*
     搜索按钮
     */
    $("#btn_search").click(function(){
        $table.bootstrapTable('selectPage', 1);
        $table.bootstrapTable('refresh', queryParams);
    });

    /*
     传递的参数
     */
    function queryParams(params) {
        var name=$("#search_customer").val();
        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,  //页面大小
            offset: params.offset, //页码
            pageindex:params.pageNumber,
            name: name
        };
        return temp;
    }
    ///////////////////////////////////////////////////////////////toolbar///////////////////////////////////////



    //获取选中的CheckBox
    $("#btn_getCheck").click(function(){
        alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
        alert("客户信息:"+$table.bootstrapTable('getSelections')[0].customer);
    });

    /*
     获取所有选中的CheckBox的主键值 【数组】
     */
    function getSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id;
        });
    }

    function reload(){
        $table.bootstrapTable('refresh');
    }
    function showAccount(id){
        //自定页
        parent.layer.open({
            type: 2,
            shift:4,//动画类型
            moveType:1,
            maxmin: true,
            shadeClose: true, //开启遮罩关闭
            area: ['700px', '530px'],
            content: '${pageContext.request.contextPath}/shop/toShopAccount.ac?sid='+id,
            success: function(layero, index){
                //layer.title("888888888", index);
                var datas={"firstname":"555555"};
//                    var body = layer.getChildFrame('body', index);
                //var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
//                    console.log(body.html()) //得到iframe页的body内容
            },
            cancel: function(index){
//                    alert(index);
                return true;
            }
        });
    }

function changePwd(user_code){
        $("#newPwd").val("");
        $("#user_code").val(user_code);
        $("#myModal3").modal('show');
}
function updatePwd(){
    var user_code=$("#user_code").val();
    var newPwd=$("#newPwd").val();
    if(newPwd!=null&&newPwd!=''){
        $.ajax( {
            url:'${pageContext.request.contextPath}/shop/updatePwd.ac?user_code='+user_code+'&newPwd='+newPwd,// 跳转到 action
            type:'post',
            cache:false,
            dataType:'json',
            success:function(data) {
                $("#myModal3").modal('hide');
                reload();
            },
            error : function() {
                alert("操作失败！");
            }
        });
    }else{
        alert("密码不能为空");
    }

}

function changePhone(user_code,phone){
$("#oldPhone").val(phone);
$("#newPhone").val("");
    $("#user_code").val(user_code);
    $("#myModal4").modal('show');
}

    //修改手机号
function updatePhone(){
    var user_code=$("#user_code").val();
    var newPhone=$("#newPhone").val();
    if(newPhone!=null&&newPhone!=''){
        $.ajax( {
            url:'${pageContext.request.contextPath}/shop/updatePhone.ac?user_code='+user_code+'&newPhone='+newPhone,// 跳转到 action
            type:'post',
            cache:false,
            dataType:'json',
            success:function(data) {
                $("#oldPhone").val(newPhone);
                $("#myModal4").modal('hide');
                reload();
            },
            error : function() {
                alert("操作失败！");
            }
        });
    }else{
        alert("新手机号不能为空");
    }

}
</script>



</html>
